<template>
  <div class="app-container">
    <el-card>
      <el-page-header @back="goBack" content="商品上架">
      </el-page-header>
    </el-card>

    <el-card class="mt20">
      <el-row :gutter="10" class="mb8">
        <el-col :span="24">
          <span style="font-size: large">单据信息</span>
        </el-col>
      </el-row>

      <el-descriptions :column="3" border>
        <el-descriptions-item label="单据号">{{ billsInfo.billsId }}</el-descriptions-item>
        <el-descriptions-item label="单据类型">{{ billsInfo.billsTypeName }}</el-descriptions-item>
        <el-descriptions-item label="往来单位">{{ billsInfo.billsCdName }}</el-descriptions-item>
        <el-descriptions-item label="录入人">{{ billsInfo.creatorName }}</el-descriptions-item>
        <el-descriptions-item label="录入时间">{{ billsInfo.createTime }}</el-descriptions-item>
        <el-descriptions-item label="验收人">{{ billsInfo.acceptUserName }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="mt20">
      <el-row :gutter="10" class="mb8" type="flex" justify="space-between">
        <el-col :span="6"><span style="font-size: large">商品明细</span></el-col>
        <el-col :span="1.5">
          <el-button type="primary" @click="handleSubmit">确认上架</el-button>
        </el-col>
      </el-row>

      <el-table :data="detailList" border>
        <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
        <el-table-column prop="drugName" label="药品名称" width="250" align="center"></el-table-column>
        <el-table-column prop="drugGg" label="规格" width="150" align="center"></el-table-column>
        <el-table-column prop="drugBatchNo" label="批号" width="120" align="center"></el-table-column>
        <el-table-column prop="drugNum" label="数量" width="100" align="center"></el-table-column>
        <el-table-column prop="drugPd" label="生产日期" width="120" align="center"></el-table-column>
        <el-table-column prop="drugExp" label="有效期" width="120" align="center"></el-table-column>
        <el-table-column label="货位" width="200" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.huoWei" placeholder="请输入货位号"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="架位号" width="200" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.drugJwh" placeholder="请输入架位号"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { buyStoreListDetail, shelvingGoods } from '@/api/storage/buyStore'

export default {
  name: 'ShelvingPage',
  data() {
    return {
      billsId: '',
      billsInfo: {},
      detailList: []
    }
  },
  created() {
    this.billsId = this.$route.query.billsId;
    if (this.billsId) {
      this.loadBillsDetail();
    }
  },
  methods: {
    // 加载单据详情
    loadBillsDetail() {
      buyStoreListDetail(this.billsId).then(res => {
        this.billsInfo = res.data;
        this.detailList = res.data.inDetailList || [];
      })
    },
    // 确认上架
    handleSubmit() {
      // 验证是否所有商品都已填写货位信息
      const hasEmpty = this.detailList.some(item => !item.huoWei || !item.drugJwh);
      if (hasEmpty) {
        this.$message.warning('请为所有商品填写货位和架位号');
        return;
      }

      this.$confirm('确认上架所有商品吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          billsId: this.billsId,
          inDetailList: this.detailList
        };

        shelvingGoods(data).then(res => {
          this.$message.success('上架成功');
          this.$router.push('/storage/buyStore');
        }).catch(err => {
          this.$message.error('上架失败：' + err.message);
        })
      })
    },
    // 返回
    goBack() {
      this.$router.back();
    }
  }
}
</script>

<style scoped>
.mt20 {
  margin-top: 20px;
}
.mb8 {
  margin-bottom: 8px;
}
</style>
